<template>
  <!-- 注册页面 -->
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <!-- 注册账号 -->
          <div class="login-box" id="_j_login_box" v-show="registShow">
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" action="javascript:;">
                  <div class="form-field">
                    <input
                      v-model="phone"
                      id="inputPassword"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      value=""
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" @click="registerNow">
                      立即注册
                    </button>
                  </div>
                </form>
                <div class="agreement">
                  注册视为同意<a target="_blank" href="javascript:;"
                    >《骡窝窝用户使用协议》</a
                  >
                </div>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
          </div>
          <!-- 填写用户信息 -->
          <div class="signup-box" v-show="userInfoShow">
            <div class="add-info">
              <div class="hd">账号注册</div>
              <form method="post" id="editForm" @submit.prevent>
                <input type="hidden" name="phone" value="" id="phone" />
                <div class="form-field m-t-10">
                  <input
                    name="nickname"
                    type="text"
                    placeholder="您的昵称"
                    v-model="nickname"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="password"
                    type="password"
                    placeholder="您的密码"
                    v-model="password"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="rpassword"
                    type="password"
                    placeholder="确认密码"
                    v-model="confirmPassword"
                  />
                  <div class="err-tip"></div>
                </div>

                <div class="form-field">
                  <div class="clearfix">
                    <a
                      class="vcode-send sms-code-send"
                      @click="obtain"
                      v-show="codeShow"
                      >获取验证码</a
                    >
                    <a
                      class="vcode-send sms-code-send"
                      @click="obtain"
                      v-show="!codeShow"
                      >{{ codeNum }}</a
                    >
                    <input
                      name="verifyCode"
                      type="text"
                      placeholder="短信验证码"
                      autocomplete="off"
                      class="vcode-input"
                      v-model="code"
                    />
                  </div>
                  <div class="err-tip clearfix"></div>
                </div>
                <div class="submit-btn">
                  <button type="submit" @click="complete">完成注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullscreen-bg fullscreen-bg-img">
      <img
        src="../assets/images/27.jpg"
        style="width: auto; height: 657px; margin-top: -213px"
      />
    </div>
  </div>
</template>

<script>
import "../assets/css/regist.css";
import { ApiCheckPhone, ApiSendVerifyCode, ApiRegist } from "../request/api";
export default {
  data() {
    return {
      //手机号
      phone: "13588889999",
      //是否显示填写用户信息
      userInfoShow: false,
      //是否显示注册
      registShow: true,
      //您的昵称
      nickname: "",
      //您的密码
      password: "",
      //确认密码
      confirmPassword: "",
      //验证码
      code: "",
      //隐藏验证码
      codeShow: true,
      //验证码倒计时
      codeNum: 60,
    };
  },

  methods: {
    //立即注册
    async registerNow() {
      //判断手机号是否为空
      if (!this.phone.trim()) {
        alert("手机号不能为空！");
        return;
      }
      //判断手机号是否为正确格式
      if (
        this.phone.search(
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        )
      ) {
        alert("手机号输入错误！");
        this.phone = "";
        return;
      }
      //判断手机号是否已注册
      let res = await ApiCheckPhone({ phone: this.phone });
      if (res.code === 200) {
        alert("用户已注册，赶紧登录去吧");
        this.$router.push("/login");
        return;
      }
      //显示填写用户信息
      this.userInfoShow = true;
      //隐藏立即注册
      this.registShow = false;
    },
    //完成注册
    async complete() {
      if (
        !this.nickname.trim() ||
        !this.password.trim() ||
        !this.confirmPassword.trim() ||
        !this.code.trim()
      ) {
        alert("内容不能为空");
        return;
      }
      if (this.password.trim() !== this.confirmPassword.trim()) {
        alert("两次密码输入不一致");
        return;
      }
      //完成注册请求
      let res = await ApiRegist({
        phone: this.phone,
        nickname: this.nickname,
        password: this.password,
        rpassword: this.confirmPassword,
        verifyCode: this.code,
      });
      //判断用户是否已经登录
      if (res.data.code === 501) {
        alert(res.data.msg);
        this.$router.push("/login");
        return;
      }
      //判断code不为200就不继续执行
      if (res.data.code !== 200) {
        alert(res.data.msg);
        return;
      }
      alert("登录成功，快去首页逛逛吧！");
      //完成注册跳转首页
      this.$router.push("/");
    },
    //获取验证码
    async obtain() {
      //验证码请求
      let res = await ApiSendVerifyCode({ phone: this.phone });
      if (res.data.code !== 200) {
        alert("验证码获取失败");
        return;
      }
      //显示倒计时
      this.codeShow = false;
      //开启定时器
      let time = setInterval(() => {
        this.codeNum--;
        if (this.codeNum === 0) {
          //显示获取验证码
          this.codeShow = true;
          //关闭定时器
          clearInterval(time);
        }
      }, 1000);
    },
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal == "/regist") {
          //存头部隐藏值
          this.$store.state.loginShow = false;
        } else {
          //存头部隐藏值
          this.$store.state.loginShow = true;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.fullscreen-bg-img {
  background-image: url(../assets/images/27.jpg);
}
</style>
